<template>
  <div style="margin-bottom: 56px" id="app">
    <div v-for="(item, index) in arr" :key="index" class="goodList">
      <!-- 商品类型 -->
      <div class="goodList_title">
        <div class="left"></div>
        <span>{{ item.goodsName }}</span>
        <div class="right"></div>
      </div>
      <!-- 商品列表 -->
      <div class="goodList_item">
        <div
          v-for="(items, indexx) in item.data"
          :key="indexx"
          class="goodList_item_box"
        >
          <router-link :to="'/product/' + item.typeId + '/' + items.id">
            <div class="goodList_item_img">
              <img :src="[items.url]" alt="" />
            </div>
          </router-link>
          <div class="goodList_item_text">
            <span class="title">{{ items.goodsTitle }}</span>
            <div class="greenCar">
              <span class="money">
                <strong>￥{{ items.money }}</strong>
                <span> /{{ items.size }}</span>
              </span>
              <div
                :id="indexx==carIndex && carType==item.typeId?'car':''"
                @click="carClick(item.typeId, items,indexx)"
                class="samllCar"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 条款 -->
    <div class="clause">
      <span>沪IPC备09008015号</span>
      <span>上海易果电子商务有限公司</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [], //存储首页商品推荐,
      newArr: [],//新商品数组
      carIndex:-1,//购物车下标
      carType:'',//购物车类型id
    };
  },
  methods: {
    carClick: function (typeId, goodsList,i) {
      //添加商品类型id
      goodsList.typeId = typeId;
      //更新到状态管理器中
      this.$store.commit("carStore",goodsList);
      //改变动画
      this.carIndex = i;
      this.carType = typeId;
    },
  },
  created() {
    this.axios({
      url: "https://www.fastmock.site/mock/4d5c012d77197ed4ac07275d896e3e05/home_goodList/home/goodsList",
      methods: "GET",
    }).then((res) => {
      this.arr = res.data;
    });
  },
  computed: {},
};
</script>

<style scoped>
a {
  display: inline-block;
  text-decoration: none;
}
.goodList_title {
  width: 100%;
  height: 51px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: center;
}
.goodList_title span {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0.15rem;
}
.left {
  width: 0.7rem;
  height: 0.09rem;
  background: url()
    0 0 no-repeat;
  background-size: 100% 100%;
}
.right {
  transform: rotate(180deg);
  width: 0.7rem;
  height: 0.09rem;
  background: url()
    0 0 no-repeat;
  background-size: 100% 100%;
}
.goodList_item {
  width: 92%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.goodList_item_box {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  min-width: 48.5%;
  height: 226px;
  border-radius: 0.25rem;
}
.goodList_item_box img {
  width: 166px;
  height: 166px;
}
.goodList_item_text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.title {
  width: 155px;
  padding-left: 9px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}
.greenCar {
  width: 90%;
  height: 0.69rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  margin-top: 5px;
}
.money {
  color: #aaa;
}
.money strong {
  color: #fb3d3d;
}
.samllCar {
  width: 0.59rem;
  height: 0.59rem;
  background: url(https://i.loli.net/2021/06/08/2L89oj5fRxZhnuM.png) no-repeat center;
  background-size: 100% 100%;
  border-radius: 50%;
}
#car{
  animation: bigCar 1s ease-in-out 0s 1 alternate;
}
@keyframes bigCar{
  0%{
    width: 0.59rem;
    height: 0.59rem;
    transform:rotate(0deg);
  }
  50%{
    width: 0.69rem;
    height: 0.69rem;
    transform:rotate(180deg);
  }
  70%{
    width: 0.66rem;
    height: 0.66rem;
    transform:rotate(240deg);
  }
  100%{
    width: 0.59rem;
    height: 0.59rem;
    transform:rotate(360deg);
  }
}
.clause {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #8d8a8a;
  font-size: 11px;
}
.clause span {
  margin-top: 3px;
}
</style>
